<template>
  <div class="user">
    <div class="body card">
      <div class="img">
        <img src="https://e.im5i.com/2021/07/29/t8bFG.png" alt="" />
      </div>
      <div class="title_no">NO.1782 8521 987</div>
      <div class="tips mt-5 txt_center cfff mb-5">每分钟自动刷新</div>
      <div class="imgBox">
        <img src="https://e.im5i.com/2021/09/29/mXAwf.png" alt="" />
      </div>
      <div class="money mt-5 txt_center cfff mb-5">
        会员余额：<span>￥0</span>
      </div>
      <div class="mt-15 txt_center cfff mb-5 btn"
          :style="btnShow?'z-index:9999;':'z-index:0;'">
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          size="small"
          class="mr-20 pl-20 pr-20"
          icon="gold-coin-o"
          @click="router.push('/recharge')"
        >
          余额充值
        </van-button>
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          size="small"
          class="ml-20 pl-20 pr-20"
          icon="certificate"
        >
          微信支付
        </van-button>
      </div>
      <!-- 信息页 -->
      <card v-model:btnShow="btnShow"></card>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import card from "./components/userCard.vue";
import { useRouter } from "vue-router";
export default {
  components: {
    card,
  },
  setup() {
    const router = useRouter();
    const btnShow = ref(true);
    return {
      btnShow,
      router,
    };
  },
};
</script>

<style lang="less" scoped>
.user {
  padding: 40px 20px 0;
  box-sizing: border-box;
  height: calc(100vh - 1.3333rem);
  background: #f8f8f8;
  .body {
    // background: #1989fa;
    // background: #1989fabf;
    background: #1baeae;
    border-radius: 20px 20px 0 0;
    height: 100%;
    overflow: hidden;
    .img {
      width: 100%;
      height: 120px;
    }
    .title_no {
      text-align: right;
      color: #fff;
      padding: 5px 5px 10px;
      border-bottom: 1px solid #ccc;
      font-size: 14px;
    }
    .imgBox {
      width: 150px;
      height: 150px;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
    }
    .money {
      font-size: 14px;
      span {
        font-weight: bold;
        font-size: 16px;
      }
    }
    .btn {
      position: relative;
    }
  }
}
</style>
